<template lang="pug">
  header.top
    span.left
      span 杭州 :
      span.weather-icon
      span.temperature 30°
      span.airType 良
      span.airTypeValues 52
      span.cut-off-line
      span 换皮肤
      span 消息
    span.right
      a(href="http://news.baidu.com/") 新闻
      a(href="http://news.baidu.com/") hao123
      a(href="http://news.baidu.com/") 地图
      a(href="http://news.baidu.com/") 视频
      a(href="http://news.baidu.com/") 贴吧
      a(href="http://news.baidu.com/") 学术
      span.name(:class="{ 'name-long': isLong }") {{userName}}
      set
      rightAside
</template>

<script>
import rightAside from '../../BaiDu/rightAside/rightAside'
import Set from '../../BaiDu/Set/set'
export default {
  name: 'top',
  components: {Set, rightAside},
  data () {
    return {
      isLong: false,
      userName: ''
    }
  },
  mounted () {
    // 获取用户名字 并且判断用户是否有名字过长的行为
    this.$http.get('https://www.easy-mock.com/mock/5afda4e3c088691e06a6ab69/BaiDu-Vue/longName').then((s) => {
      this.userName = s.data.data.name
      if (this.userName.length > 10) {
        this.isLong = true
      }
    }).catch((s) => {
    })
  }
}
</script>

<style scoped lang="stylus">
.top
  height: 32px;
  width: 100%;
  border-bottom: 1px solid #ebebeb;
  font-size 12px
  .left
    margin-left 10px
    float: left
    &:after
      content: ''
      display: block
      clear both
    span
      height 32px
      line-height 32px
      margin-left 10px
      &:nth-child(n+7)
        text-decoration underline
    .weather-icon
      width 18px
      height:18px
      background url("../../../../static/img/login/night-icon.png") no-repeat
      display: inline-block
      vertical-align text-bottom
    .airType
      color: #badc00;
      font-weight: bold;
    .cut-off-line
      height:10px
      width:1px
      background #555
      display: inline-block
  .right
    font-size 14px
    display flex
    justify-content flex-end
    align-items center
    margin-right 13px
    a
      color #555
      height 32px
      line-height 32px
      margin-left 20px
      font-weight bold
      display: inline-block
    .name
      margin-left 20px
    .name-long
      overflow hidden
      text-overflow:ellipsis;
      vertical-align top
      width:100px
</style>
